<template>
  <view class="video-wrapper" :data-theme="globPrimary">
    <template v-if="!$u.test.empty(par_souce)">
      <!-- #ifdef H5 -->
      <edu-aliplayer
        class="player-wrap"
        v-if="!$u.test.empty(par_souce)"
        :key="$u.random(1, 1000000)"
        :vid="String(vid)"
        :playauth="playAuth.playauth"
        :height="playAuth.height"
        :source="par_souce"
        :skinLayout="playAuth.skinLayout"
        @ready="ready"
        @play="playCallback"
        @pause="pauseCallback"
        @ended="endedCallback"
        @timeupdate="timeupdateCallback"
        ref="player"
      ></edu-aliplayer>
      <!-- #endif -->
      <view class="proved" v-if="previewEnd">
        <view class="text">试看结束</view>
        <view class="bottom">
          <view class="btn" @click="onPreviewDurationPay(1)">购买该课程</view>
          <view
            class="btn"
            @click="onPreviewDurationPay(2)"
            v-if="vuex_courseSection.price > 0"
            >购买该课时</view
          >
        </view>
      </view>
    </template>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  props: {
    vid: {
      type: [String, Number],
      default: "0",
    },
    par_souce: { type: [String, Object] },
  },
  data() {
    return {
      playAuth: {
        height: "210px",
        autoplay: false,
        cover: "",
        playauth: "010101001010",
        skinLayout: [
          { name: "bigPlayButton", align: "cc" },
          {
            name: "H5Loading",
            align: "cc",
          },
          { name: "errorDisplay", align: "tlabs", x: 0, y: 0 },
          { name: "infoDisplay" },
          { name: "tooltip", align: "blabs", x: 0, y: 56 },
          { name: "thumbnail" },
          {
            name: "controlBar",
            align: "blabs",
            x: 0,
            y: 0,
            children: [
              { name: "progress", align: "blabs", x: 0, y: 44 },
              { name: "playButton", align: "tl", x: 15, y: 12 },
              { name: "timeDisplay", align: "tl", x: 10, y: 7 },
              {
                name: "fullScreenButton",
                align: "tr",
                x: 10,
                y: 12,
              },
              { name: "setting", align: "tr", x: 10, y: 12 },
            ],
          },
        ],
      },
      instance: null,
      timer: null,
      videoDuration: 0, // 总是长
      previewDuration: 0, // 试看时长单位为秒, 传入0表示可以完整观看
      previewEnd: false, // 试看结束
      iSpreview: false, // 是否有试看
      currentTime: 0,
    };
  },
  computed: {
    ...mapGetters({
      globPrimary: "designSetting/getGlobTheme",
      globPrimaryColor: "designSetting/getGlobThemeColor",
    }),
  },
  methods: {
    // 播放器初始化完成
    ready(player) {
      this.instance = player;
      let videoDuration = parseInt(player.getDuration());
      this.videoDuration = videoDuration;
      this.handleAuditionTime();
      if (this.previewDuration !== 0 && this.previewDuration < videoDuration) {
        this.iSpreview = true;
      } else {
        let initialTime = this.vuex_courseSection.current_time;
        player.seek(initialTime);
      }
    },
    // 开始/继续播放时触发play事件
    playCallback(player) {
      this.handleTiming();
    },
    // 当暂停播放时触发 pause 事件
    pauseCallback(player) {
      clearInterval(this.timer);
      this.handleAddLearning();
    },
    // 当播放结束时触发 ended 事件
    endedCallback(player) {
      clearInterval(this.timer);
      this.handleAddLearning();
    },
    // 播放进度变化时触发,触发频率 250ms 一次
    timeupdateCallback(player) {
      this.currentTime = Math.floor(player.getCurrentTime());
      if (
        this.previewDuration !== 0 &&
        this.previewDuration < this.videoDuration
      ) {
        let previewTime = this.previewDuration;
        let currentTime = player.getCurrentTime();
        if (previewTime < currentTime) {
          this.previewEnd = true;
          player.seek(previewTime);
          player.pause();
        }
      }
    },
    // 定时器 默认10s执行一次
    handleTiming() {
      let _this = this;
      _this.timer = setInterval(function () {
        _this.handleAddLearning();
      }, 10000);
    },
    // 添加学习记录
    handleAddLearning() {
      if (this.vuex_courseSection.is_buy == 1) {
        this.$edu.api.createCourseRecord({
          course_id: this.vuex_courseSection.course_id,
          section_id: this.vuex_courseSection.section_id,
          current_time: this.currentTime,
        });
      }
    },
    // 计算试听时长
    handleAuditionTime() {
      let total_time = this.videoDuration;
      if (this.vuex_courseSection.is_buy == 0) {
        let num = total_time * (this.vuex_courseSection.audition / 100);
        this.previewDuration = Math.floor(num);
      }
    },
    // 试看购买
    onPreviewDurationPay(type) {
      if (type == 1) {
        this.$u.route({
          type: "redirectTo",
          url: "/pageCourse/cart/course",
          params: {
            id: this.vuex_courseSection.course_id,
            redirect_type: "course",
          },
        });
      } else {
        this.$u.route({
          type: "redirectTo",
          url: "/pageCourse/cart/section",
          params: {
            id: this.vuex_courseSection.id,
          },
        });
      }
    },
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
};
</script>

<style lang="scss" scoped>
.video-wrapper {
  position: relative;
  height: 415rpx;
  .preview-layer {
    position: absolute;
    left: 0;
    z-index: 1100;
    bottom: 40px;
  }
  .proved {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1101;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    .text {
      font-size: 32rpx;
      font-weight: 400;
      color: #ebeef5;
    }
    .bottom {
      margin-top: 25rpx;
      display: flex;
    }
    .btn {
      margin: 0 20rpx;
      padding: 0 14rpx;
      height: 48rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      @include bg-color();
      border-radius: 4rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: #ebeef5;
    }
  }
}
</style>
